<template>
    <div class="itemMusicList">
        <div class="itemListTop">
            <div class="listLeft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gl-playCircle"></use>
                </svg>
                <div>
                    <strong>播放全部</strong>
                    <p>(共{{itemlist.length}}首)</p>
                </div>
            </div>
            <div class="listRight">
                <p>+</p>
                <span>收藏({{subscribedCount}})</span>
            </div>
        </div>
        <div class="itemlist" v-for="(item,index) in itemlist" :key="index">
            <div class="itemListInfo">
                <span class="number">{{index+1}}</span>
                <div class="itemListName"  @click="playMusic(index)">
                    <span class="musicName">{{item.name}}</span>
                    <div class="authorName">
                        <span v-for="(item1,index) in item.ar" :key="index">
                            {{ item1.name }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="itemListRight">
                <svg class="icon videoIcon" aria-hidden="true" v-if="item.mv !==0">
                    <use xlink:href="#icon-shipin"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31liebiao"></use>
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
    export default {
        setup(props){
            console.log(props)
        },
        props:['itemlist','subscribedCount'],
        methods:{
            playMusic:function(i){
                this.updatePlayList(this.itemlist)
                this.updatePlayListIndex(i)
            },
            ...mapMutations(['updatePlayList','updatePlayListIndex'])
        }
    }
</script>

<style lang="less" scoped>
    .itemMusicList{
        width: 100%;
        // height: 20rem;
        background-color: #fff;
        padding: 0 0.2rem;
        margin-top: .2rem;
        border-top-left-radius: .4rem;
        border-top-right-radius: .4rem;
        margin-bottom: 1.3rem;
        .itemListTop{
            display: flex;
            height: 1rem;
            justify-content: space-between;
            align-items: center;
            .listLeft{
                display: flex;
                justify-content: space-between;
                width: 50%;
                div{
                    display: flex;
                    justify-content: space-between;
                    p{
                        color: rgb(138, 137, 137);
                        font-size: .2rem;
                        margin-top: .08rem;
                    }
                }
            }
            .listRight{
                display: flex;
                justify-content: space-between;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 0.8rem;
                padding: 0 0.15rem;
                border-radius: 0.5rem;
                color: #fff;
                background-color: red;
                p{
                    margin-right: .1rem;
                    font-size: .5rem;
                }
            }
        }
        .itemlist{
            display: flex;
            justify-content: space-between;
            height: 1rem;
            margin-top: .3rem;
            .itemListInfo{
                display: flex;
                justify-content: space-between;
                .number{
                    padding-top: .2rem;
                    margin: 0 0.3rem 0 .1rem;
                }
                .itemListName{
                    display: flex;
                    flex-direction: column;
                    .musicName{
                        font-weight: 700;
                        width: 4rem;
                        /*第一步： 溢出隐藏 */
                        overflow: hidden;
                        /* 第二步：让文本不会换行， 在同一行继续 */
                        white-space: nowrap;
                        /* 第三步：用省略号来代表未显示完的文本 */
                        text-overflow: ellipsis
                    }
                    .authorName{
                        color: rgb(138, 137, 137);
                        margin-top: .08rem;
                        font-size: 0.2rem;
                        display: flex;
                        width: 4rem;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        span{
                            margin-right:.1rem;
                        }
                    }
                }
            }
            .itemListRight{
                margin-top: .2rem;
                .icon{
                    fill:rgb(138, 137, 137);
                }
                .videoIcon{
                    margin-right: .3rem;
                }
            }
        }
    }
</style>